<template>
	<view class="fu-p-30">
		<demo-desc>
			此组件带加减按钮的数字输入框。
		</demo-desc>
		
		<fu-section title="基本案例" customClass="fu-m-t-20" type="line">
			<fu-number-box @change="handleChange"></fu-number-box>
		</fu-section>
		
		<fu-section :title="'使用v-model : '+ modelValue" customClass="fu-m-t-20" type="line">
			<view class="fu-font-20 fu-m-t-10" slot="desc">使用 v-model 显示默认值</view>
			<view class="fu-m-t-20">
				<fu-number-box v-model="modelValue" @blur="blur" @focus="focus" @change="handleChange"></fu-number-box>
			</view>
		</fu-section>
		
		<fu-section title="设置最小值和最大值" customClass="fu-m-t-20" type="line">
			<view class="fu-m-t-20">
				<fu-number-box :min="2" :max="9" :value="10"></fu-number-box>
			</view>
		</fu-section>
		
		<fu-section title="设置步长（步长0.1)" customClass="fu-m-t-20" type="line">
			<view class="fu-font-24 fu-color-999999 fu-m-t-10" slot="desc">使用 step 属性设置步长</view>
			<view class="fu-m-t-20">
				<fu-number-box :value="1.1" :step="0.1"></fu-number-box>
			</view>
		</fu-section>
		
		<fu-section title="自定义背景" customClass="fu-m-t-20" type="line">
			<view class="fu-font-24 fu-color-999999 fu-m-t-10" slot="desc">使用 bgColor 属性设置自定义背景色</view>
			<view class="fu-m-t-20">
				<fu-number-box :value="50" bgColor="#2979FF" color="#fff"></fu-number-box>
			</view>
		</fu-section>
		
		<fu-section title="禁用状态" customClass="fu-m-t-20" type="line">
			<view class="fu-font-24 fu-color-999999 fu-m-t-10" slot="desc">使用 disabled 属性设置组件禁用</view>
			<view class="fu-m-t-20">
				<fu-number-box :disabled="true"></fu-number-box>
			</view>
		</fu-section>
		
		<fu-section :title="'获取输入的值 : ' + numberValue" customClass="fu-m-t-20" type="line">
			<view class="fu-m-t-20">
				<fu-number-box :value="numberValue" @change="handleInputChange"></fu-number-box>
			</view>
		</fu-section>
		
		<fu-section title="禁用输入" customClass="fu-m-t-20" type="line">
			<view class="fu-font-24 fu-color-999999 fu-m-t-10" slot="desc">使用 inputDisabled 属性设置组件禁用</view>
			<view class="fu-m-t-20">
				<fu-number-box :inputDisabled="true"></fu-number-box>
			</view>
		</fu-section>
		
		<fu-section title="插槽使用" customClass="fu-m-t-20" type="line">
			<view class="fu-font-24 fu-color-999999 fu-m-t-10" slot="desc">使用插槽定义按钮</view>
			<view class="fu-m-t-20">
				<fu-number-box :inputDisabled="true" bgColor="transparent" size="15">
					<template v-slot:minus>
						<fu-icons name="minus-circle" size="20"></fu-icons>
					</template>
					<template v-slot:plus>
						<fu-icons name="plus-circle" size="20"></fu-icons>
					</template>
				</fu-number-box>
			</view>
		</fu-section>
	</view>
</template>

<script setup>
	import { ref } from 'vue';

	// data数据
	let numberValue = ref(0);
	let modelValue = ref(3);
	
	// methods方法
	const handleInputChange = (e) => {
		numberValue.value = e;
	};
	
	const handleChange = (e) => {
		console.log('返回数值：', e)
	};
	
	const blur = (e) => {
		console.log('blur:', e)
	};
	
	const focus = (e) => {
		console.log('focus:', e)
	}
</script>

<style lang="scss">

</style>